<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/admin.css">
    <link rel="stylesheet" href="../assets/css/app.css">
    <script src="../assets/js/jquery.min.js"></script>
	<script src="../assets/js/amazeui.min.js"></script>
	<script src="../assets/js/app.js"></script>
    <script type="text/javascript">
    function checkNum(){
        if($('.switch-anim').prop('checked')){
            console.log("选中");
        }else{
            console.log("没选中");
        }
    }
    </script>
    <style type="text/css">
    .switch {
            width: 57px;
            height: 28px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #fdfdfd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }
        .switch:before {
            content: '';
            width: 26px;
            height: 26px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .switch:checked {
            border-color: #64bd63;
            box-shadow: #64bd63 0 0 0 16px inset;
            background-color: #64bd63;
        }
        .switch:checked:before {
            left: 30px;
        }
        .switch.switch-anim {
            transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
        }
        .switch.switch-anim:before {
            transition: left 0.3s;
        }
        .switch.switch-anim:checked {
            box-shadow: #64bd63 0 0 0 16px inset;
            background-color: #64bd63;
            transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
        }
        .switch.switch-anim:checked:before {
            transition: left 0.3s;
        }
        #intervalButton,#rangMinButton,#rangMaxButton{
        background:#eaeaea;
        } 
        
        .am-modal-btn{
        background:#0080ff;
        }
    </style>
    </head>
<body >
	<div class='am-btn-group am-btn-group-xs'>
	<button editFlag='1' class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
	</div>
    
    <!-- <div class='am-modal-hd'>传感器控制</div>
    <div class='am-modal-bd'>
    </div>
    <font size='6'>运行状态:</font><input id='workStateInput' class='switch switch-anim' onchange='checkNum()' type='checkbox' checked />
    <br/><font size='6'>是否异常处理:</font><input id='isAutoHandleInput' class='switch switch-anim' onchange='checkNum()' type='checkbox' checked />
    <br/><font size='6'>采集间隔:</font> <input id='intervalButton' style='font-size:25px' style='width:100px;height:25px;vertical-align:middle' type='number' min='0' max='10' step='1' value='6'>
    <br/><br/>
    <div class='am-modal-footer'>
	    <span class='am-modal-btn' data-am-modal-cancel><font size='4' color='white'>取消</font></span>
	    <span class='am-modal-btn' data-am-modal-confirm><font size='4' color='white'>提交</font></span>
    </div> -->
    <br/>
	<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
        <!-- <div class="am-modal-dialog"> -->
    		<div class="am-modal-hd">Amaze UI</div>
    		<div class="am-modal-bd">
    		</div>
		    <font size="6">运行状态:</font><input class="switch switch-anim" onchange="checkNum()" type="checkbox" checked />
		   	<br/><font size="6">是否异常处理:</font><input class="switch switch-anim" onchange="checkNum()" type="checkbox" checked />
		    <br/><font size="6">采集间隔:</font> <input id='intervalButton' style='font-size:25px' style="width:100px;height:25px;vertical-align:middle" type="number" min="0" max="10" step="1" value="6">
		    <br/><font size="6">阈值:</font> <input id='rangMinButton' style='font-size:25px' style="width:100px;height:25px;vertical-align:middle" type="number" min="0" max="10" step="1" value="6">
		    <font size="4">---</font> <input id='rangMaxButton' style='font-size:25px' style="width:100px;height:25px;vertical-align:middle" type="number" min="0" max="10" step="1" value="6">
		  	<br/><br/>
		  	<div class="am-modal-footer">
		      <span class="am-modal-btn" data-am-modal-cancel><font size="4" color="white">取消</font></span>
		      <span class="am-modal-btn" data-am-modal-confirm><font size="4" color="white">提交</font></span>
		    </div>
  		</div>
	<!-- </div> -->
</body>
    <script type="text/javascript">
    $(function() {
    	$("[editFlag]").click(function() {
    	    $('#my-prompt').modal({
    	      relatedTarget: this,
    	      onConfirm: function(e) {
    	        alert('你输入的是：' + e.data || '')
    	      },
    	      onCancel: function(e) {
    	        alert('不想说!');
    	      }
    	    });
    	  });
    	});
    </script>
</html>